<template>
  <div class="Wrapper">
    <div class="dataWrap">
      <div class="ruleSet">
        <span class="text">标段</span>
        <el-select class="select-width" size="small" v-model="bidSectionId" placeholder="请选择" @change="getWorkAreaList">
          <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id.toString()" />
        </el-select>

        <span class="text">工区</span>
        <el-select class="select-width" size="small" v-model="areaId" placeholder="请选择" @change="getDeviceInfo">
          <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <span class="text">设备</span>
        <el-select class="select-width" size="small" v-model="thirdPartyId" placeholder="请选择" @change="changeDevice">
          <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>

        <span class="text">服务器</span>
        <el-select class="select-width" size="small" v-model="workSiteId" placeholder="请选择" @change="getDonghuanDevice">
          <el-option v-for="item in workSiteList" :key="item.organizationUuid" :label="item.name" :value="item.organizationUuid" />
        </el-select>

        <span class="text">子节点</span>
        <el-select class="select-width" size="small" v-model="deviceId" placeholder="请选择" @change="getSensorData">
          <el-option v-for="item in workSiteDeviceList" :key="item.indexCode" :label="item.name" :value="item.indexCode" />
        </el-select>
      </div>
      <div class="dataShow">
        <div class="showData">
          <EnvirData :isShowGaugeText="isShowGaugeText"></EnvirData>
        </div>
        <ul class="mainData">
          <li v-for="(item, index) in envirDataList" :key="index">
            <p class="overShow" v-show="item.multiple != 0">超标{{ item.multiple.toFixed(2) }}倍</p>
            <p class="titNum" :style="{ color: item.multiple == 0 ? '#333' : '#f39039' }">{{ item.latestValue }}</p>
            <p class="type">
              <span>{{ item.name }}</span>
              <span v-show="item.unit">({{ item.unit }})</span>
            </p>
          </li>
        </ul>
      </div>
    </div>

    <div class="chartWrap">
      <div class="chooseType">
        <div class="tit">今日实时数据统计</div>
        <div class="dateShow" >
          <ul class="envirType" v-show="chargeTable">
            <li v-for="item in typeList" :key="item.id" @click="changType(item.id)" :class="{active: item.id == typeIndex}">
              {{item.label}}
            </li>
          </ul>
          <ul class="dateType">
            <li
              :class="{iconActive: chargeTable == true}"
              class="icon iconfont icontubiao"
              style="font-size: 22px"
              @click="changeStyle(true)" />
            <li
              :class="{iconActive: chargeTable == false}"
              class="icon iconfont icondashujukeshihuaico-"
              style="font-size: 20px;"
              @click="changeStyle(false)" />
          </ul>
        </div>
      </div>
      <div class="chartData">
        <EchartWrap v-show="chargeTable" ref="EchartWrapRef"></EchartWrap>
        <TableWrap v-show="!chargeTable" ref="TableWrapRef"></TableWrap>
      </div>
    </div>
  </div>
</template>

<script>
  import EchartWrap from './EchartWrap';
  import TableWrap from './TableWrap';
  import EnvirData from "./EnvirData";
  import HttpInterface from "../../../util/httpInterface";
  import { mapState, mapActions } from "vuex";

  export default {
    name: "EnvirSurvey",
    components:{
      EchartWrap, TableWrap, EnvirData
    },
    data() {
      return {
        typeList: [
          { id: '0', label: 'PM2.5、PM10' },
          { id: '1', label: '噪声' },
          { id: '2', label: '温湿度' },
          { id: '3', label: '风速' },
          { id: '4', label: '大气压' }
        ],
        typeIndex: '0',
        chargeTable: true,
        envirDataList: [
          {unit: "μg/m³", multiple: 0, name: "PM10", latestValue: "--"},
          {unit: "μg/m³", multiple: 0, name: "PM2.5", latestValue: "--"},
          {unit: "dB", multiple: 0, name: "噪声", latestValue: "--"},
          {unit: "hPa", multiple: 0, name: "大气压", latestValue: "--"},
          {unit: "℃", multiple: 0, name: "大气温度", latestValue: "--"},
          {unit: "% RH", multiple: 0, name: "大气湿度", latestValue: "--"},
          {unit: null, multiple: 0, name: "风向", latestValue: "--"},
          {unit: "m/s", multiple: 0, name: "风速", latestValue: "--"},
        ],
        thirdPartyId:'',
        deviceList:[],
        workSiteList: [],
        workSiteId: "",
        workSiteDeviceList: [],
        deviceId: "",
        bidSectionId: "",
        isShowGaugeText: false,  // 是否显示超标 字样
        censusData: null,
        censusTableData: [],
        workAreaInfo: [],
        areaId: "",
      }
    },
    props: {
      bidSection: String
    },

    watch: {
      bidSection(val) {
        this.bidSectionId = val;
        this.getWorkAreaList()
      }
    },

    computed: {
      ...mapState(["biaoduanList"])
    },

    methods: {
      ...mapActions(["getEnvironmentDevice", "selectByBidSection"]),

      getWorkAreaList() {
        let _this = this;
        this.selectByBidSection({
          bidSection: this.bidSectionId,
          fn: function (data) {
            _this.workAreaInfo = data;
            if (data.length == 0) {
              _this.areaId = "";
            } else {
              _this.areaId = data[0].id;
            }
            _this.getDeviceInfo();
          }
        })
      },

      getDeviceInfo() {
        let _this = this;
        this.getEnvironmentDevice({
          areaId: this.areaId,
          fn (data) {
            _this.deviceList = data.rows;
            if (data.rows.length == 0) {
              _this.thirdPartyId = '';
            } else {
              _this.thirdPartyId = data.rows[0].id;
            }
            _this.changeDevice();
            _this.getEnvironmentCensus();
          }
        })
      },

      // 选择工地
      changeDevice() {
        let param = {
          thirdPartyId: this.thirdPartyId
        }
        HttpInterface.requestGet(this, HttpInterface.URL_ENVIRONMENT_GETLIST, param, (res) => {
          var { other, success } = res.data;
          if (success) {
            this.workSiteList = other;
            this.workSiteId = other[0].organizationUuid;
            this.getDonghuanDevice();
          }
        }, null)
      },

      // 动环设备
      getDonghuanDevice() {
        let param = {
          thirdPartyId: this.thirdPartyId,
          orgUuid: this.workSiteId,
          pageNo: 1,
          pageSize: 100
        }
        HttpInterface.requestPost(this, HttpInterface.URL_MONITOR_SEARCH, param, (res) => {
          let { success, other } = res.data;
          if (success) {
            let { list } = other;
            this.workSiteDeviceList = list;
            this.deviceId = list[0].indexCode;
            this.getSensorData();
          }
        }, null, false)
      },

      // 环境监测数据
      getSensorData() {
        let params = {
          pageNo: 1,
          pageSize: 100,
          parentIndexCode: this.deviceId,
          thirdPartyId: this.thirdPartyId,
        };
        HttpInterface.requestPost(this, HttpInterface.URL_SENSOR_SEARCH, params, (res) => {
          var { success, other } = res.data;
          other.list.forEach(item => {
            if (item.multiple > 0) this.isShowGaugeText = true;
          })
          this.envirDataList = other.list;
        }, null, false)
      },

      // 图表数据
      getEnvironmentCensus() {
        let params = {
          thirdPartyId: this.thirdPartyId
        };
        HttpInterface.requestPost(this, HttpInterface.URL_ENVIRONMENT_DATA, params, res => {
          let { success, other } = res.data;
          if (success) {
            this.censusTableData = other;
            other.reverse();
            this.readerData(other);
          }
        }, null, true)
      },

      // 处理图表需要的数据格式
      readerData(data) {
        var obj = {
          xAxisDate: [],  // x轴 时间
          seriesPMData: [],  // pm10 pm2.5 数据
          seriesNoiseData: [],  // 噪声 数据
          seriesHumidData: [],  // 温湿度 数据
          seriesWindSpeedData: [],  // 风速 数据
          seriesAirPressureData: [],  // 大气压 数据
          legendPMText: [],  // pm10 pm2.5 文字
          legendNoiseText: [],  // 噪声 文字
          legendHumidText: [],  // 温湿度 文字
          legendWindSpeedText: [],  // 风速 文字
          legendAirPressureText: [],  // 大气压 文字
        }
        let pm10Arr = [], noiseArr = [], temArr = [], pm25Arr = [], humidArr = [], windSpeedArr = [], airPressureArr = [];

        data.forEach((item, index) => {
          var keys, values = [], arr;

          let time = item.deviceTime.split(" ");
          obj.xAxisDate.push(time[1]);

          if (index == 0) {
            keys = Object.keys(data[index])
            keys.splice((keys.indexOf("deviceCode")), 1);
            keys.splice((keys.indexOf("deviceTime")), 1);
            keys.splice((keys.indexOf("windDirection")), 1);

            keys.forEach(key => {
              switch (key) {
                case "pm25Value":
                  obj.legendPMText.push("PM2.5")
                  break;
                case "pm10Value":
                  obj.legendPMText.push("PM10")
                  break;
                case "noiseValue":
                  obj.legendNoiseText.push("噪声")
                  break;
                case "temValue":
                  obj.legendHumidText.push("温度")
                  break;
                case "humidityValue":
                  obj.legendHumidText.push("湿度")
                  break;
                case "windSpeedValue":
                  obj.legendWindSpeedText.push("风速")
                  break;
                case "airPressureValue":
                  obj.legendAirPressureText.push("大气压")
                  break;
              }
            })
          }

          arr = Object.values(data[index])
          arr.forEach(key => {
            if (typeof key === 'number') {
              values.push(key)
            }
          })

          pm10Arr.push(values[0])
          noiseArr.push(values[1])
          temArr.push(values[2])
          pm25Arr.push(values[3])
          humidArr.push(values[4])
          windSpeedArr.push(values[5])
          airPressureArr.push(values[6])

          obj.seriesPMData = [{
            name: "PM2.5",
            data: pm25Arr
          }, {
            name: "PM10",
            data: pm10Arr
          }]

          obj.seriesNoiseData = [{
            name: "噪声",
            data: noiseArr
          }]

          obj.seriesHumidData = [{
            name: "温度",
            data: temArr
          }, {
            name: "湿度",
            data: humidArr
          }]

          obj.seriesWindSpeedData = [{
            name: "风速",
            data: windSpeedArr
          }]

          obj.seriesAirPressureData = [{
            name: "大气压",
            data: airPressureArr
          }]
        })
        this.censusData = obj;

        this.changType("0")
      },


      // 选择工地设备
      changeWorkSiteList() {
        let param = {
          orgUuid: this.workSiteId,
          thirdPartyId: this.thirdPartyId
        };
        HttpInterface.requestGet(this, HttpInterface.URL_ENVIRONMENT_GETDEVICE, param, (res) => {
          var { success, other } = res.data;
          if (success) {
            this.workSiteDeviceList = other;
            this.deviceId = other[0].uuid;
            // this.getWorkSiteDevice()
          }
        }, null)
      },

      // 获得环境监测数据
      getWorkSiteDevice() {
        let params = {
          deviceUuid: this.deviceId,
          thirdPartyId: this.thirdPartyId
        };
        HttpInterface.requestGet(this, HttpInterface.URL_ENVIRONMENT_GETENVDATA, params, (res) => {
          var data = res.data;
          this.envirDataList = data.other
        }, null)
      },

      changType(id) {
        this.typeIndex = id;
        let { xAxisDate,
          seriesPMData,
          seriesNoiseData,
          seriesHumidData,
          seriesWindSpeedData,
          seriesAirPressureData,
          legendPMText,
          legendNoiseText,
          legendHumidText,
          legendWindSpeedText,
          legendAirPressureText } = this.censusData;

        let data;
        switch (id) {
          case "0":
            data = {
              legendText: legendPMText,
              xAxisDate: xAxisDate,
              seriesData: seriesPMData
            }
            break;
          case "1":
            data = {
              legendText: legendNoiseText,
              xAxisDate: xAxisDate,
              seriesData: seriesNoiseData
            }
            break;
          case "2":
            data = {
              legendText: legendHumidText,
              xAxisDate: xAxisDate,
              seriesData: seriesHumidData
            }
            break;
          case "3":
            data = {
              legendText: legendWindSpeedText,
              xAxisDate: xAxisDate,
              seriesData: seriesWindSpeedData
            }
            break;
          case "4":
            data = {
              legendText: legendAirPressureText,
              xAxisDate: xAxisDate,
              seriesData: seriesAirPressureData
            }
            break;
        }
        this.$refs.EchartWrapRef.handleCensusData(data)

        if (!this.chargeTable) this.changeStyle(false)
      },

      changeStyle(data) {
        this.chargeTable = data;
        if (!data) this.$refs.TableWrapRef.showList(this.censusTableData.reverse())
      }
    },
  }
</script>

<style scoped lang="scss">
.dataWrap {
  width: 100%;

  .ruleSet {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .text {
      font-size: 14px;
      margin-right: 10px;

      &:not(:nth-child(1)) {
        margin-left: 30px;
      }
    }

    .select-width {
      width: 160px;
    }
  }

  .dataShow {
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;

    .showData {
      width: 165px;
      height: 165px;
      margin-left: 10px;
    }

    .mainData {
      display: flex;
      width: calc(100% - 185px);
      justify-content: space-around;

      li {
        width: 160px;
        text-align: center;
        position: relative;
        margin-top: 10px;

        .overShow {
          font-size: 12px;
          color: #f39039;
          font-family: "宋体";
          position: absolute;
          top: -22px;
          left: 50%;
          transform: translate(-50%);
        }

        .titNum {
          font-size: 40px;
          font-family: 'Microsoft Himalaya'
        }

        .type {
          font-size: 12px;
          margin-top: -4px;
        }
      }
    }
  }
}

.chartWrap {
  width: 100%;

  .chooseType {
    height: 30px;
    padding: 14px 0;
    display: flex;
    justify-content: space-between;

    .tit {
      font-size: 16px;
    }

    .dateShow {
      display: flex;

      .envirType {
        display: flex;

        li {
          padding: 0 10px;
        }
      }

      .dateType {
        margin-left: 10px;
        display: flex;

        li {
          padding: 0 5px;
        }
      }

      .envirType li,
      .dateType li {
        color: #333333;
        line-height: 30px;
        cursor: pointer;
        margin-left: -1px;
        font-size: 12px;
        border: 1px solid #bbbbbb;
        transition: all 0.3s;
      }
    }
  }

  .chartData {
    width: 100%;
    height: calc(100vh - 410px);
  }
}

.active,
.iconActive {
  color: rgb(10, 134, 255) !important;
  border-color: rgb(10, 134, 255) !important;
  position: relative;
  z-index: 1;
}
</style>
